//博客的头部导航链接
var Style = require('./../../assets/css/home.css')
var React = require('react');
//尝试引入图片
var banner1 = require('./../../assets/images/banner1.jpg')
var banner2 = require('./../../assets/images/banner2.jpg')
var banner3 = require('./../../assets/images/banner3.jpg')

//引如一个自己通过link内置属性定义的组件，省去多次写activeclass
var IndexLink = require('react-router').IndexLink;//内置的激活状态的标签
var Link = require('react-router').Link;

class Footer extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
        };
    }
    render() {
        return (
            <div  style={{backgroundColor:'#e9e9e9'}}>
                {/*主页内容区*/}
                <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
                    {/*轮播*/}
                    <div id="dropdown-tips-y" className="dropdown-tips-y">
                        <i className="iconfont">&#xe610;</i>
                    </div>
                    <ol className="carousel-indicators slideshow-dot-y">
                        <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <div className="carousel-inner" role="listbox">
                        <div className="item active">
                            <img src={banner1} alt="..."/>
                            <div className="carousel-caption slideshow-word-y">
                                第一张图片
                            </div>
                        </div>
                        <div className="item">
                            <img src={banner2} alt="..."/>
                            <div className="carousel-caption slideshow-word-y">
                                第二张图片
                            </div>
                        </div>
                        <div className="item">
                            <img src={banner3} alt="..."/>
                            <div className="carousel-caption slideshow-word-y">
                                第三张图片
                            </div>
                        </div>
                    </div>

                    <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                    </a>
                    <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                    </a>
                </div>
                {/*主要内容区域*/}
                <div className="container animated zoomIn">
                    <div className="row">
                        {/*container要和row一起使用*/}
                        <div className="colCss-leftRight-y col-lg-8 col-md-8 col-sm-8">
                            <div className="flex" id="contentParent">
                                {/*普通文本样式*/}
                                <div className="flex-leftRight-y">
                                    <h4 className="title"><a href="javascript:void(0);">第一个文章-编者安</a></h4>
                                    <div className="auther">
                                        <span>作者：<a href="javascript:void(0);">钟婷</a></span>
                                        ·<span>2017年10月1日</span>
                                    </div>
                                    <h4 className="other-title"><a href="javascript:void(0);">副标题-编者安</a></h4>
                                    <div className="content">
                                        <p>做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。</p>
                                    </div>
                                    <div className="btn-more">
                                        <a href="javascript:void(0);">阅读全文</a>
                                    </div>
                                    <hr/>
                                    <div className="tips">
                                        <i className="iconfont">&#xe95c;</i>
                                        <a href="javascript:void(0)">csdn极客</a>
                                        <a href="javascript:void(0)">github</a>
                                    </div>
                                </div>
                                {/*带图片的文本*/}
                                <div className="flex-leftRight-y">
                                    <h4 className="title"><a href="javascript:void(0);">第er个文章-编者安</a></h4>
                                    <div className="auther">
                                        <span>作者：<a href="javascript:void(0);">钟婷</a></span>
                                        ·<span>2017年10月1日</span>
                                    </div>
                                    <h4 className="other-title"><a href="javascript:void(0);">副标题-编者安</a></h4>
                                    <div className="content">
                                        <img src={banner3} alt="" style={{width: '100%'}}/>
                                        <p>做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。</p>
                                    </div>
                                    <div className="btn-more">
                                        <a href="javascript:void(0);">阅读全文</a>
                                    </div>
                                    <hr/>
                                    <div className="tips">
                                        <i className="iconfont">&#xe95c;</i>
                                        <a href="javascript:void(0)">csdn极客</a>,
                                        <a href="javascript:void(0)">github</a>
                                    </div>
                                </div>
                                <div className="flex-leftRight-y">这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，
                                </div>
                            </div>
                        </div>
                        <div className="colCss-leftRight-y col-lg-4 col-md-4 col-sm-4">
                            <div className="flex">
                                <div className="flex-right-y">
                                    <h5 className="mycall-y">
                                        <span>我的社交</span>
                                    </h5>
                                    <div className="wechat">
                                        微信：<a href="javascript:void(0);">xxxxxxxx</a>
                                    </div>
                                    <div className="wechat">
                                        联系电话：<a href="javascript:void(0);">xxxxxxxx</a>
                                    </div>
                                    <div className="github">
                                        <i className="iconfont">&#xe6b6;</i>
                                        <a href="javascript:void(0);">GitHub专区</a>
                                    </div>
                                </div>
                                <div className="flex-right-y">
                                    <h5 className="mycall-y">
                                        <span>建议意见-盒子</span>
                                    </h5>
                                    <form action="">
                                        <div className="input-group">
                                        <span className="input-group-addon" id="basic-addon1">@</span>
                                        <input type="text" className="form-control" placeholder="Yourname" aria-describedby="basic-addon1"/>
                                        </div>
                                        <input type="text" id="inputHelpBlock" className="form-control separate-y" aria-describedby="helpBlock"/>
                                        <div className="btn-box-y">
                                            <input className="btn btn-default separate-y" type="submit" value="提交"/>
                                        </div>
                                    </form>
                                </div>
                                <div className="flex-right-y">
                                    <h5 className="mycall-y">
                                        <span>时光印记-Tips</span>
                                    </h5>
                                    <div className="tips-box-y">
                                        <a href="javascript:void(0);">nodejs</a>
                                        <a href="javascript:void(0);">javascript</a>
                                        <a href="javascript:void(0);">react</a>
                                        <a href="javascript:void(0);">mongoose</a>
                                        <a href="javascript:void(0);">vue</a>
                                        <a href="javascript:void(0);">webapp</a>
                                        <a href="javascript:void(0);">css3</a>
                                        <a href="javascript:void(0);">margin</a>
                                        <a href="javascript:void(0);">javaquery</a>
                                        <a href="javascript:void(0);">...</a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

module.exports = Footer;